<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediae-check = 'false'
  offset="50"
>
    <!-- 文章列表 -->
    <article-item v-for="obj in list" 
    @disLikeEV="disLiveFn"
    @reportEV="reportFn"
    :key="obj.id" 
    :artObj="obj"
     @click.native="itemClickFn(obj.art_id)"
    >

    </article-item>
  </van-list>
  </van-pull-refresh>
  </div>
</template>

/* 问题1： 网页刚打开,created里请求和onLoad里请求同时发送,请求的都是最新数据
  onLoad中,2次一样的数据合并,数据重复,key重复了
  原因：van-list组件,组件挂载时,默认就会判定是否触底
  第一页数据也是网络请求回来的,标签先挂载了,数据回来更新DOM,所以标签没有高度,list的load事件上来就触发
  解决方案1：list组件添加 :immediae-check = "false" 上来初始化不要判定
  解决方案2：onLoad第一行,写数组长度的判断
 */

<script>
import ArticleItem from '../../../components/ArticleItem.vue'
import {getAllArticlesAPI,dislikeArticlesAPI,reportArticlesAPI} from '@/api'
import {Notify} from 'vant'
export default {
  props: {
   // list: Array // 新闻列表数组
   channelId: Number
  },
  data () {
    return {
      list: [], // 新闻列表数组
      loading: false, // 底部加载状态
      finished: false, // 底部完成状态
      theTime: new Date().getTime(), // 用于分页
      isLoading: false // 顶部加载状态
    }
  },
  components: {
    ArticleItem
  },
 async created () {
     this.getArticleListFn()
  },
  methods: {
    async getArticleListFn() {
    // 新闻列表
    const res = await getAllArticlesAPI({
      channel_id : this.channelId, // 先默认请求推荐频道数据
      timestamp: this.theTime
    })
    // pre_timestamp
    // 下一段开头的那篇文章时间戳
    // 第一次 系统时间(timestamp) -> 后台 返回0-9条数据 -> 携带第10条pre_timestamp值返回
    // 第二次 (timestamp) - 上一次pre_timestamp(带包告诉后,从指定的时间戳再往后找10个) 10-19,20条pre_timestamp返回
    this.list = [...this.list, ...res.data.data.results]
    this.theTime = res.data.data.pre_timestamp

    this.loading = false // 如果不关闭,底部一直是加载中状态,下次触底会触发onLoad
    if(res.data.data.pre_timestamp === null) { // 本次回来的数据是最后,没有下一段数据了
    this.finished = true
    }   

    // 顶部刷新状态改为false
      this.isLoading = false
    },
    // 底部加载
   async onLoad () {
      if (this.list.legnth === 0) {
        return this.loading = false // 如果页面没有数据,本次onLoad不往下执行
      }
      this.getArticleListFn()
    },
    // 顶部刷新数据方法
   async onRefresh () {
      // 把list数组清空,请求一份新的数据
      this.list = []
      this.theTime = new Date().getTime()
      this.getArticleListFn()
    },
    // 反馈不感兴趣
   async disLiveFn (Id) {
      try {
      const res = await dislikeArticlesAPI({artId:Id})
      Notify({ type: 'success', message: '反馈成功'})
      console.log(res)
      } catch (err) {
      //  Notify({type: 'warning', message: '反馈失败 - 练习程序员'})
      }
    },
    // 反馈 - 垃圾内容
   async reportFn (id,value) {
      try {
        const res = await reportArticlesAPI({
          artId: id,
          type: value
        })
        Notify({ type: 'success',message: '举报成功'})
        console.log(res)
      } catch {
       // Notify({type: 'warning', message: '举报失败 - 请练习程序员'})
      }
    },
    // 文章单元格 - 点击事件
    itemClickFn (id) {
      this.$router.push({
        path: `/deteil?art_id=${id}`
      })
    }
  }
}
</script>
